import React,{useEffect} from 'react'
import './Tupian1.css'
import a1 from '../../../images/a (19).png'
import a2 from '../../../images/a (12).png'
import a3 from '../../../images/a（33）.webp'
import a4 from '../../../images/a (16).png'
import a5 from '../../../images/a（31）.webp'
import a6 from '../../../images/a（32）.webp'
import a7 from '../../../images/a（30）.webp'
import a8 from '../../../images/a (14).png'
import a9 from '../../../images/a(23).webp'
import a10 from '../../../images/a(26).webp'

function Tupian1() {
     useEffect(()=>{
     // 获取所有可拖动的图片  
      const draggableImages = document.querySelectorAll('.Img img') as NodeListOf<HTMLImageElement>;  
        
      // 为每个可拖动的图片添加事件监听器  
      draggableImages.forEach(img => {  
          img.addEventListener('dragstart', function(event) {  
              // 设置拖动数据（这里可以是图片的id、src或其他唯一标识符）  
              event.dataTransfer!.setData('text/plain', img.src);  
              // 可选：添加拖动时的视觉反馈  
              img.style.opacity = '0.5';  
              
          });  
        
          img.addEventListener('dragend', function(event) {  
              // 恢复拖动后的元素样式  
              img.style.opacity = '1'; 
              
          });  
      });  
        
      // 为目标盒子添加拖放事件监听器  
      const dropContainer = document.getElementById('huabu')!;  
      dropContainer.addEventListener('dragover', function(event) {  
          // 阻止默认处理（默认不允许放置）  
          event.preventDefault();  
      });  
        
      dropContainer.addEventListener('drop', function(event) {  
          // 阻止默认处理（同上）  
          event.preventDefault();  
          // 获取拖动的数据（这里是图片的src）  
          const imgSrc = event.dataTransfer!.getData('text/plain');  
          // 创建一个新的图片元素并添加到目标容器中  
          const newImg = document.createElement('img');  
          newImg.src = imgSrc;  
          newImg.width = 50; // 根据需要设置  
          newImg.height = 500; // 根据需要设置  
          this.appendChild(newImg);  
          // 注意：这里并没有从源容器中移除原始图片，如果你需要这样做，请额外编写逻辑  
      });
      
  },[])
  return (
    <div className='Img'>
      <img src={a1} alt="tupian1" style={{ width: '100px' }} />
      <img src={a2} alt="tupian1" style={{ width: '100px' }} />
      <img src={a3} alt="tupian1" style={{ width: '100px' }} />
      <img src={a4} alt="tupian1" style={{ width: '100px' }} />
      <img src={a5} alt="tupian1" style={{ width: '100px' }} />
      <img src={a6} alt="tupian1" style={{ width: '100px' }} />
      <img src={a7} alt="tupian1" style={{ width: '100px' }} />
      <img src={a8} alt="tupian1" style={{ width: '100px' }} />
      <img src={a9} alt="tupian1" style={{ width: '100px' }} />
      <img src={a10} alt="tupian1" style={{ width: '100px' }} />
    </div>
  )
}

export default Tupian1
